<html>
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=620, initial-scale=1, maximum-scale=1">
    <title>jQuery gMap - Examples</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:bolditalic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/example.css" />
</head>
<body>

<div id="lat"></div><br>
<div id="long"></div><br>
<div id="deviceid"></div><br>

<div id="map" class="map">
    <p>This will be replaced with the Google Map.</p>
</div>
<div id="timestamp"></div>
<div id="test2"></div><br>
<button id="socketBtn">Start socket</button>
<div id="socketPageDiv">
	<iframe id="socketPage" src="" width="100%" height="40"></iframe> 
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{ 
   $('#map').gMap({
        address: "Poland",
        zoom: 5,
    });
    
    $("#socketBtn").click(function() {
		$("#socketPage").attr("src","socket.php");
	});
    
    var refreshId = setInterval(function()
    {
		$('#map').gMap("removeAllMarkers");
		$.ajax({
			url: 'update.php',
			data: 'button=i',
			dataType: 'json',
			success: function(data)
			{
				$("#lat").html("Latitude:"+data[0]);
				$("#long").html("Longtitude:"+data[1]);
				$("#deviceid").html("DeviceID:"+data[2]);
				$('#map').gMap("addMarker",{latitude: data[0], longitude: data[1], html: data[2]});
			}
		});
		var today=new Date();
		$('#timestamp').text('Update: '+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());
	},2000);
});
</script>

</body>
</html>
